<template>
	<div>
		<div class="packageIsmask">
			<div class="packageBox">
				<div class="packageHeader">
					<text class="header_cancel" @click="cencleClick">取消</text>
					<text class="header_title">配送时间</text>
					<text class="header_confirm" @click="saveClick">确定</text>
				</div>
				<div class="packageContent">
					<div :class="[item.status == true ?'choose_content_item':'content_item']" v-for="(item,index) in dateForm" @click="chooseClick(index)">
						<text :class="[item.status == true ?'choose_content_item_title':'content_item_title']">{{item.title}}</text>
						<div class="choose_icon" v-if="item.status == true">
							<icon class="iconfont icon-dagou choose_icon_title"></icon>

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</template>
<script>
	export default {
		name: '',
		data() {
			return {
				dateForm: [{
						title: '周一',
						status: false
					},
					{
						title: '周二',
						status: false
					},
					{
						title: '周三',
						status: false
					},
					{
						title: '周四',
						status: false
					},
					{
						title: '周五',
						status: false
					},
					{
						title: '周六',
						status: false
					},
					{
						title: '周日',
						status: false
					}
				]
			}
		},
		created() { // 在实例创建完成后被立即调用
		},
		methods: {
			chooseClick(index) {
				this.dateForm[index].status = !this.dateForm[index].status
			},
			filterData(val) {
				if (val == '周一') {
					return '1'
				} else if (val == '周二') {
					return '2'
				} else if (val == '周三') {
					return '3'
				} else if (val == '周四') {
					return '4'
				} else if (val == '周五') {
					return '5'
				} else if (val == '周六') {
					return '6'
				} else if (val == '周日') {
					return '7'
				}
			},
			saveClick() {
				var _this = this
				var weexData = []
				_this.dateForm.forEach(function(item) {
					if (item.status == true) {
						weexData.push(item)
					}
				})
				var weexTime = ''
				weexData.forEach(function(item) {
					weexTime += _this.filterData(item.title)
				})
				var weexForm = {
					weexData: weexData,
					weexTime: weexTime
				}
				this.$emit("saveClick", weexForm)
			},
			cencleClick() {
				this.$emit('packageClose')
			},
		},
		components: {},
	}
</script>

<style scoped>
	.packageIsmask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 999;
	}

	.packageBox {
		width: 750px;
		height: 450px;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 20px 20px 0px 0px;
		position: fixed;
		bottom: 0px;
	}

	.packageHeader {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 40px;
	}

	.header_cancel {
		font-size: 28px;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
		line-height: 39px;
	}

	.header_title {
		font-size: 28px;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
		line-height: 39px;
	}

	.header_confirm {
		font-size: 28px;
		font-weight: 500;
		color: rgba(33, 96, 255, 1);
		line-height: 39px;
	}

	.packageContent {
		padding-left: 40px;
		padding-right: 40px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.content_item {
		width: 210px;
		height: 72px;
		background-color: rgba(255, 255, 255, 1);
		border-style: solid;
		border-width: 2px;
		border-color: rgba(236, 236, 236, 1);
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20px;
		box-sizing: border-box;
	}

	.content_item_title {
		font-size: 28px;
		font-weight: 500;
		color: rgba(181, 181, 181, 1);
		line-height: 39px;
	}

	.choose_content_item {
		width: 210px;
		height: 72px;
		background-color: rgba(51, 51, 51, 1);
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20px;
		box-sizing: border-box;
		position: relative;
		overflow: hidden
	}

	.choose_content_item_title {
		font-size: 28px;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 39px;
	}

	.choose_icon {
		width: 0;
		height: 0;
		border-top: 37px solid rgba(255, 120, 46, 1);
		border-left: 3rpx solid transparent;
		position: absolute;
		right: 0;
		top: 0
	}

	.choose_icon_title {
		font-size: 14px;
		color: white;
		position: absolute;
		top: -30px;
		right: 4px;
	}
</style>
